//Markdown渲染工具（将消息内容渲染为HTML格式）,集成代码高亮、链接处理、表情符号等功能。
// 1、对代码处理：highlight函数
// 2、链接处理：mdLinkAttributes插件
// 3、表情符号：emoji插件
// 4、其他默认处理
// 渲染函数：rederMarkdown
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js';
import mdLinkAttributes from 'markdown-it-link-attributes'
import { full as emoji } from 'markdown-it-emoji'
// 使用 atom-one-dark 主题
import 'highlight.js/styles/atom-one-dark.css'
import copyIcon from '@/assets/photo/复制.png'

// 创建 markdown-it 实例
const md = new MarkdownIt({
    html: true,        // 允许解析 HTML 标签（默认关闭，开启可能有安全风险）
    breaks: true,      // 允许换行符（\n）转换为 <br> 标签
    linkify: true,     // 自动识别并转换 URL 为链接（如 "http://example.com" 变为 <a> 标签）
    //当解析器遇到代码块时会自动调用该函数。处理代码块的渲染和高亮显示: str=代码块的原始文本内容  lang=代码块指定的语言
    highlight: function (str: string, lang: string): string {
        // 如果指定了语言，且 highlight.js 支持该语言
        if (lang && hljs.getLanguage(lang)) {
            try {
                //ignoreIllegals: true 表示忽略不合法的语法，防止高亮失败，data-action是自定义属性
                const highlighted = hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
                return `<div class="code-block">
                            <div class="code-header">
                                <span class="code-lang">${lang}</span>
                                <button class="code-action-btn" data-action="copy" title="复制">
                                    <img src="${copyIcon}" alt="copy" />
                                </button>
                            </div>
                            <pre class="hljs"><code>${highlighted}</code></pre>
                        </div>`
            } catch (_) { }//捕捉错误但不进行处理   
        }
        //不支持时，仅对代码进行 HTML 转义（防止 XSS），避免直接渲染原始文本 
        // < 转义为 &lt;
        // > 转义为 & gt;
        // & 转义为 & amp;
        // " 转义为 &quot;
        // ' 转义为 &#39
        // 将特殊字符转换为 HTML 实体
        //若无法高亮（无指定语言或高亮失败），则仅转义特殊字符
        return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`
    }
})

//让链接在新标签页中打开 
// 配置MarkdownIt的插件mdLinkAttributes，修改 Markdown 中链接的默认行为,渲染为html格式
md.use(mdLinkAttributes, {
    attrs: {
        target: '_blank',//让链接在新标签页中打开 
        rel: 'noopener',//修复 target="_blank" 可能带来的安全风险
    }
})

// 启用 emoji 支持
md.use(emoji)

// 导出渲染函数
export const rederMarkdown = (content: string) => {
    if (!content) return " "
    return md.render(content)
}
